@charset "utf-8";
div {
    display: inline-block;
}

.conter {
    width: 100%;
    height: 100%;
    .top {
        position: relative;
        .beijing {
            img {
                width: 100%;
                height: 100%;
            }
        }
        .shuoming {
            position: absolute;
            top: 15px;
            left: 15px;
        }
        .music {
            position: absolute;
            top: 15px;
            right: 15px;
        }
        .guize {
            display: none;
            position: absolute;
            left: 20px;
            top: 130px;
            z-index: 11;
            img {
                width: 100%;
            }
        }
    }
    .center{
        display: none;
    }
    .center2 {
        .bei {
            position: relative;
            width: 196px;
            height: 260px;
            img {
                width: 100%;
            }
            .start {
                position: absolute;
                top: 100px;
                left: 27px;
                animation: start1 1s infinite linear alternate;
            }
        }
    }
}

.liwu_z {
    position: relative;
    width: 196px;
    height: 260px;
    img {
        width: 100%;
    }
    .liwu {
        position: absolute;
        display: none;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background: #000;
        opacity: 0.5;
    }
}

.conter .center1 div.active .liwu {
    display: block;
}

.conter .center2 div.active .liwu {
    display: block;
}

.conter .center3 div.active .liwu {
    display: block;
}

@keyframes start1 {
    0% {}
    50% {
        transform: rotateZ(10deg) scale(1.2);
    }
    100% {
        transform: rotateZ(-10deg);
    }
}